<template>
	<el-container>
	  <el-header><el-button type="primary" @click="add_bt(0)">添加</el-button></el-header>
	  <el-main>
		  <el-table
			    :data="list"
			    border
			    style="width: 100%"
				 :stripe="true">

			    <el-table-column
			      prop="name"
			      label="名称"
			     >
			    </el-table-column>
				
				<el-table-column label="父级">
				　　<template slot-scope="scope" v-if="scope.row.Father">
					{{scope.row.Father.name}}
				　　</template>
				<template slot-scope="scope" v-else>
					顶级
				　　</template>
				</el-table-column>
				
			    <el-table-column
			      fixed="right"
			      label="操作"
			     >
			      <template slot-scope="scope">
			        <el-button @click="edit_bt(scope.row)" type="text" size="small">编辑</el-button>
			        <el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>
			      </template>
			    </el-table-column>
			  </el-table></el-main>
	  <el-footer>
		  <el-pagination
			style="margin-top: 50px;" background layout="prev, pager, next" :total="total"
				:page-size="size" @current-change="jump_page" :current-page="currPage"
			>
			</el-pagination>
		</el-footer>
		<el-dialog :title="title[type]" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			 <el-form ref="form" :model="form" label-width="100px">
				<el-form-item label="名称">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="父级">
					<el-select v-model="form.pid" placeholder="请选择">
						<el-option
						  label="顶级"
						  :value="0">
						</el-option>
					    <el-option
					      v-for="item in all"
					      :key="item.id"
					      :label="item.name"
					      :value="item.id"
						  v-if="item.pid==0"
						  >
					    </el-option>
					  </el-select>
				</el-form-item>
			
				
			</el-form>
			
			
		
			<span slot="footer" class="dialog-footer">
				<el-button @click="handleClose()">取 消</el-button>
				<el-button type="primary" @click="submit()">确 定</el-button>
			</span> 
		</el-dialog>
		<Pic :drawer="drawer" :back_fun="back" :send_father="get_img"></Pic>
	</el-container>
	
	

		
	
	
</template>
<script>
import Pic from '../../components/pic_upload.vue'
import {Api_url} from '../../api/config.js'

export default {
  data() {
    return {
		 form:{
			 name:'',
			 pid:0
		 },
		 goods:[],
		 title:['添加','编辑'],
		 total:0,
		 formLabelWidth:'120px',
		 size:6,
		 getimg:Api_url,
		 currPage:1,
		 total:0,
		 list:[],
		 all:[],
		 dialogVisible:false,
		 drawer:false,
		 type:0,//0添加1编辑
		 
    }
  },
  components: {
  	Pic
  },
  mounted(){
	this.get_all()
	this.get_all_list()
  },
  methods: {
	  get_all(){
		 this.$model.get("/cms/region/get?num="+this.size+"&page="+this.currPage).then(res=>{
			 if(res.code==200){
				 this.list=res.data
				 this.total=res.total
			 }
			 
			 
		 })
	  },
	  get_all_list(){
		  this.$model.get("/cms/region/get_all").then(res=>{
			  if(res.code==200){
				  this.all=res.data
			  }
		  })
	  },
		submit(){
			if(this.type==0){
				if(this.form['id']){
					delete this.form['id']
				}
				this.$model.post("/cms/region/create",this.form).then(res=>{
					if(res.code==200){
						this.$message({
						         message: '添加成功',
						         type: 'success'
						       });
						this.dialogVisible=false
						this.clear_data()
						this.get_all()
					}
				})
			}
			else{
				this.$model.post("/cms/region/update",this.form).then(res=>{
					if(res.code==200){
						this.$message({
						         message: '更新成功',
						         type: 'success'
						       });
						this.dialogVisible=false
						this.clear_data()
						this.get_all()
					}
				})
			}
		},
		edit_bt(item)
		{
			this.form=item
			this.type=1
			this.dialogVisible=true
		/* 	localStorage.setItem("edit_goods",JSON.stringify(item))
			this.$router.push({ path: '/house/add_house' }) */
		},
		get_img(e){
			this.img_list=e
			this.form.img=e.id
			this.drawer=false
		},
		back(e){
			this.drawer=false
		},
		//分页跳转
		jump_page(e) {
			this.currPage=e
			this.get_all()

		},
		del(id){
			this.$confirm('确认删除？', '提示', {
			          confirmButtonText: '确定',
			          cancelButtonText: '取消',
			          type: 'warning'
			        }).then(() => {
						this.$model.put("/cms/region/del?id="+id).then(res=>{
							if(res.code==200){
								this.$message({
								         message: '已删除',
								         type: 'success'
								       });
								this.handleClose()	
								this.currPage=1
								this.get_all()
							}
						})
			        
			        }).catch((error) => {
						console.log(error)
			          this.$message({
			            type: 'info',
			            message: '已取消删除'
			          });          
			        });
	
		},
		//添加事件
		add_bt()
		{
			this.type=0
			this.dialogVisible=true	
		},
		//关闭事件
		handleClose()
		{
		
			this.dialogVisible=false
			
		},
		delimg(){
			this.img_list={
				url:''
			};
			this.form.img=''
		},
		choose_pic() {
			this.drawer = !this.drawer	
		},
		clear_data()
		{
			this.form.name=''
			this.form.pid=0
			this.get_all()

		}
  },
  created() {
  },
  beforeUpdate() {},
  // 挂载前状态(里面是操作)
  beforeMount() {
  }
}
</script>
<style>
	.head_pic{
		width: 120px;
		height: 120px;
	}
	
	.picA {
		width: 148px;
		height: 148px;
		background-color: #FBFDFF;
		border: 1px dashed #C0CCDA;
		border-radius: 6px;
		box-sizing: border-box;
		vertical-align: top;
		text-align: center;
		margin: 6px;
	}
	
	.img {
		width: 144px;
		height: 144px;
		border: 1px solid #BFBFBF;
		border-radius: 3px;
	}
</style>
